<template>
  <div>
    <a-card :bordered="false" :bodyStyle="{ height: '100%' }" :style="{ height: '100%' }">
      <a-card-grid style="width:25%;textAlign:'center';height:100%">
        <zh-tree ref="menuTreePage" :resultFields="resultFields" :url="treeUrl" height="420px" :moveUrl="moveUrl"
          @select="onTreeSelect" @drop="onDrop"></zh-tree>
      </a-card-grid>
      <a-card-grid style="width:75%;textAlign:'center';height:100%">
        <div>
          <a-tabs defaultActiveKey="baseInfo" @change="tabsChange">
            <a-tab-pane tab="基础信息" key="baseInfo" forceRender>
              <div class="hh-scroll-hover" style="height:400px;">
                <menu-form ref="menuPage" />
              </div>
            </a-tab-pane>
            <a-tab-pane tab="标签信息" key="labelList" forceRender>
              <div class="hh-scroll-hover" style="height:400px;">
                <label-form ref="labelPage" />
              </div>
            </a-tab-pane>
            <a-tab-pane tab="角色权限列表" key="roleList" forceRender>
              <div v-if="tabKey==='roleList'">
                <div class="table-page-search-wrapper">
                  <a-form layout="horizontal">
                    <a-row :gutter="8">
                      <a-col :md="9" :sm="24">
                        <a-form-item label="角色名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                          <a-input v-model="queryRoleParam.roleName" placeholder="支持模糊查询" />
                        </a-form-item>
                      </a-col>
                      <a-col :md="9" :sm="24">
                        <a-form-item label="角色类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                          <a-select v-model="queryRoleParam.roleTypes" mode="multiple" placeholder="请选择" allowClear>
                            <a-select-option v-for="item in dictData.roleType" :key="item.dictKey"
                              :value="item.dictKey">{{ item.dictValue }}</a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                      <a-col :md="6" :sm="24">
                        <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' } ">
                          <a-button type="primary" @click="() =>{this.findRoleListBtn()}">查询</a-button>
                          <a-button style="margin-left: 8px" @click="() => {this.clearRoleAll()}">重置</a-button>
                        </span>
                      </a-col>
                    </a-row>
                  </a-form>
                </div>
                <vxe-grid resizable show-overflow ref="roleListTable" stripe border :auto-resize="true"
                  highlight-hover-row highlight-current-row highlight-hover-column highlight-current-column
                  highlight-cell height="337px" size="small" row-id="roleId" :columns="roleColumn" :data="roleTableData"
                  :loading="roleLoading" :start-index="(roleTablePage.currentPage - 1) * roleTablePage.pageSize"
                  :pager-config="roleTablePage" @page-change="handleRolePageChange">
                </vxe-grid>
              </div>
            </a-tab-pane>
            <a-tab-pane tab="用户权限列表" key="userList" forceRender>
              <div v-if="tabKey==='userList'">
                <div class="table-page-search-wrapper">
                  <a-form layout="horizontal">
                    <a-row :gutter="8">
                      <a-col :md="9" :sm="24">
                        <a-form-item label="用户名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                          <a-input v-model="queryUserParam.userName" placeholder="支持模糊查询" />
                        </a-form-item>
                      </a-col>
                      <a-col :md="9" :sm="24">
                        <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                          <a-input v-model="queryUserParam.fullName" placeholder="支持模糊查询" />
                        </a-form-item>
                      </a-col>
                      <a-col :md="6" :sm="24">
                        <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' } ">
                          <a-button type="primary" @click="() =>{this.findUserListBtn()}">查询</a-button>
                          <a-button style="margin-left: 8px" @click="() => {this.clearUserAll()}">重置</a-button>
                        </span>
                      </a-col>
                    </a-row>
                  </a-form>
                </div>
                <vxe-grid resizable show-overflow ref="userListTable" stripe border :auto-resize="true"
                  highlight-hover-row highlight-current-row highlight-hover-column highlight-current-column
                  highlight-cell height="337px" size="small" row-id="userId" :columns="userColumn" :data="userTableData"
                  :loading="userLoading" :start-index="(userTablePage.currentPage - 1) * userTablePage.pageSize"
                  :pager-config="userTablePage" @page-change="handleUserPageChange"
                  :checkbox-config="{reserve: true, checkMethod}">
                </vxe-grid>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-card-grid>

    </a-card>
    <!-- fixed footer toolbar -->
    <footer-tool-bar>
      <a-button style="margin-left: 8px;" v-if="infoFlag" type="primary" icon="plus" @click="() =>{this.menuAdd()}">同级新增
      </a-button>
      <a-button style="margin-left: 8px;" v-if="infoFlag" type="primary" icon="plus-circle"
        @click="() =>{this.childmenuAdd()}">子级新增</a-button>
      <a-button style="margin-left: 8px;" v-if="infoFlag" type="primary" icon="edit" @click="() =>{this.saveMenu()}">保存
      </a-button>
      <a-button style="margin-left: 8px" v-if="infoFlag" type="danger" icon="minus" @click="() =>{this.deleteMenu()}">删除
      </a-button>
      <a-button style="margin-left: 8px;" v-if="userFlag" type="primary" icon="plus"
        @click="() =>{this.openRouetUserModel()}">添加用户</a-button>
      <a-button style="margin-left: 8px" v-if="userFlag" type="danger" icon="minus" @click="() =>{this.deleteUser()}">
        删除用户</a-button>
      <a-button style="margin-left: 8px;" v-if="labelFlag" type="primary" icon="edit"
        @click="() =>{this.openAddLabel()}">关联标签</a-button>
      <a-button style="margin-left: 8px;" v-if="roleFlag" type="primary" icon="plus"
        @click="() =>{this.openRoleModel()}">添加角色</a-button>
      <a-button style="margin-left: 8px;" v-if="roleFlag" type="danger" icon="minus" @click="() =>{this.deleteRole()}">
        删除角色</a-button>
    </footer-tool-bar>

    <a-modal title="关联标签" centered style="top: 20px;" width="85%" destroyOnClose cancelText="关闭" okText="保存"
      v-model="labelVisible" @ok="saveLabel">
      <menu-label-form ref="menuLabelForm" :menuInfo="menuInfo" />
    </a-modal>

    <a-modal title="角色授权" centered style="top: 20px;" width="85%" destroyOnClose cancelText="关闭" okText="保存"
      v-model="roleVisible" @ok="saveRole">
      <menu-role-form ref="LabelRolePage" :menuInfo="menuInfo" />
    </a-modal>

    <a-modal title="单独添加用户" centered style="top: 20px;" width="85%" destroyOnClose v-model="MenuUservisible"
      cancelText="关闭" okText="保存" @ok="saveUser">
      <menu-user-form ref="menuUserPage" :menuInfo="menuInfo" />
    </a-modal>

  </div>
</template>

<script>
import { getAppMenuTreeList, getAppMenuDetail, addAppMenu, editAppMenu, deleteAppMenu, moveAppMenu, editAppLabel, getBatchDict, getMenuRoleList, saveMenuRole, deleteMenuRole, getMenuUserList,saveMenurUser,deleteMenuUser } from "@/services/system/api"
import FooterToolBar from '@/components/FooterToolbar'
import LabelForm from '@/pages/system/form/LabelForm'
import MenuForm from '@/pages/system/form/MenuForm'
import MenuLabelForm from '@/pages/system/form/MenuLabelForm'
import MenuRoleForm from '@/pages/system/form/MenuRoleForm'
import MenuUserForm from '@/pages/system/form/MenuUserForm'
import modal from 'ant-design-vue/es/modal'
import { loop, loopParentKey } from '@/utils/util'
const initForm = {
  bgColor: '',
  color: '',
  icon: '',
  labelFlag: '',
  linkName: '',
  linkPath: '',
  linkType: '',
  linkUrl: '',
  menuId: '',
  menuPro: '',
  menuType: '',
  nodeType: '',
  orderNo: '',
  publicFlag: '',
  status: '',
  title: '',
  rate: '',
  areaCode: '',
  parentTitle: '',
  parentId: '',
  remarks: '',
  bgUrl: '',
  param1: '',
  param2: '',
  param3: '',
  param4: '',
  serviceCode: '',
  serviceName: '',
}
const statusMap = {
  0: {
    status: 'error',
    text: '禁用'
  },
  1: {
    status: 'processing',
    text: '启用'
  }
}
export default {
  name: 'MenuManager',
  components: {
    FooterToolBar,
    MenuForm,
    LabelForm,
    MenuLabelForm,
    MenuRoleForm,
    MenuUserForm
  },
  data () {
    return {
      description: 'app菜单管理',
      // 基础信息操作按钮是否显示
      infoFlag: true,
      roleFlag: false,
      userFlag: false,
      // 菜单列表操作按钮是否显示
      // 功能树
      expandedKeys: [],
      dictData: [],
      // 用户查询条件
      queryUserParam: {},
      // 角色查询条件
      queryRoleParam: {},
      selectedKeys: [],
      labelFlag: false,
      labelVisible: false,
      searchValue: '',
      tabKey: '',
      autoExpandParent: true,
      menuInfo: null,
      menuList: [],
      infoButtonType: '9',
      treeUrl: getAppMenuTreeList,
      moveUrl: moveAppMenu,
      resultFields: { treeList: 'menuList', expandedKeys: 'expandedKeys', selectedKeys: 'selectedKeys' },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 }
      },
      roleVisible: false,
      roleTableData: [],
      roleLoading: false,
      roleTablePage: {
        total: 0,
        pageNum: 1,
        currentPage: 1,
        pageSize: 20
      },
      roleColumn: [
        { type: 'checkbox', width: 50, fixed: 'left' },
        { type: 'seq', width: 50, fixed: 'left', align: 'center', title: '序号' },
        { field: 'roleId', title: '角色Id', visible: false, fixed: 'left', align: 'center', width: 150 },
        { field: 'roleName', title: '角色名称', align: 'center', fixed: 'left', width: 200 },
        { field: 'parentId', title: '父角色Id', visible: false, align: 'center', width: 200 },
        { field: 'roleType', title: '角色类型', visible: false, align: 'center', width: 100 },
        { field: 'roleTypeName', title: '角色类型', align: 'center', width: 100 },
        { field: 'status', title: '状态', align: 'center', width: 80, slots: { default: ({ row }) => { return [this.formatStatus(row.status)] } } },
        { field: 'remarks', title: '备注', align: 'center', showOverflow: true, width: 250 }
      ],
      MenuUservisible: false,
      userTableData: [],
      userLoading: false,
      userTablePage: {
        total: 0,
        pageNum: 1,
        currentPage: 1,
        pageSize: 20
      },
      userColumn: [
        { type: 'checkbox', width: 50, fixed: 'left' },
        { type: 'seq', width: 50, fixed: 'left', align: 'center', title: '序号' },
        { field: 'userId', title: '用户Id', visible: false, fixed: 'left', align: 'center', width: 150 },
        { field: 'userName', title: '用户名', align: 'center', width: 150 },
        { field: 'fullName', title: '姓名', align: 'center', width: 150 },
        { field: 'privilegeSource', title: '授权来源ID', visible: false, align: 'center', width: 150 },
        { field: 'sourceName', title: '授权来源', align: 'center', width: 150 },
        { field: 'userType', title: '用户类型key', visible: false, align: 'center', width: 150 },
        { field: 'userTypeName', title: '用户类型', align: 'center', width: 150 },
        { field: 'status', title: '状态', align: 'center', width: 80, slots: { default: ({ row }) => { return [this.formatStatus(row.status)] } } }
      ],
    }
  },
  created () {
    // 初始化数据
    const params = {}
    params.dictFields = 'roleType'
    this.$http.post(getBatchDict, params).then(res => {
      this.dictData = res.result
    })
  },
  mounted () {
    this.$refs.menuPage.setData(null)
  },
  methods: {
    // 树节点选择事件
    onTreeSelect (selectedKeys) {
      this.infoButtonType = '3'
      this.selectedKeys = selectedKeys
      if (selectedKeys && selectedKeys.length > 0) {
        this.findMenuInfo()
      } else {
        this.$refs.menuPage.setData(null)
      }
    },
    findMenuInfo () {
      if (this.selectedKeys && this.selectedKeys.length > 0) {
        this.$refs.menuPage.getDetail(this.selectedKeys[0])
        this.$refs.labelPage.findLabelList(this.selectedKeys[0])
      }
    },
    findRoleListBtn () {
      if (this.selectedKeys && this.selectedKeys.length > 0) {
        this.roleTablePage.pageNum = 1
        this.roleTablePage.currentPage = 1
        this.findRoleList()
      } else {
        modal.warn({ title: '提示', content: '请先选择某一节点' })
      }
    },
    findRoleList () {
      if (this.selectedKeys && this.selectedKeys.length > 0) {
        this.roleloading = true
        const params = Object.assign(this.queryRoleParam, this.roleTablePage)
        params.menuId = this.selectedKeys[0]
        this.$http.post(getMenuRoleList, params).then((res) => {
          this.roleTableData = res.result.list
          this.roleTablePage.total = res.result.total
          this.roleTablePage.pageNum = res.result.pageNum
          this.roleTablePage.currentPage = res.result.pageNum
          this.roleTablePage.pageSize = res.result.pageSize
          this.roleLoading = false
        }).catch(() => {
          this.roleLoading = false
        })
      }
    },
    findUserListBtn () {
      if (this.selectedKeys && this.selectedKeys.length > 0) {
        this.userTablePage.pageNum = 1
        this.userTablePage.currentPage = 1
        this.findUserList()
      } else {
        modal.warn({ title: '提示', content: '请先选择某一节点' })
      }
    },
    findUserList () {
      if (this.selectedKeys && this.selectedKeys.length > 0) {
        this.userloading = true
        const params = Object.assign(this.queryUserParam, this.userTablePage)
        params.menuId = this.selectedKeys[0]
        this.$http.post(getMenuUserList, params).then((res) => {
          this.userTableData = res.result.list
          this.userTablePage.total = res.result.total
          this.userTablePage.pageNum = res.result.pageNum
          this.userTablePage.currentPage = res.result.pageNum
          this.userTablePage.pageSize = res.result.pageSize
          this.userLoading = false
        }).catch(() => {
          this.userLoading = false
        })
      }
    },
    checkMethod ({ row }) {
      // 勾选框是否可操作
      const privilegeSource = row.privilegeSource
      if (privilegeSource === 'alone') {
        return true
      } else {
        return false
      }
    },
    formatStatus (cellValue) {
      if (cellValue) {
        const text = statusMap[cellValue].text
        const status = statusMap[cellValue].status
        if (text) {
          return <a-badge status={status} text={text} />
        } else {
          return cellValue
        }
      }
    },
    handleRolePageChange ({ currentPage, pageSize }) {
      this.roleTablePage.pageNum = currentPage
      this.roleTablePage.currentPage = currentPage
      this.roleTablePage.pageSize = pageSize
      this.findRoleList()
    },
    handleUserPageChange ({ currentPage, pageSize }) {
      this.userTablePage.pageNum = currentPage
      this.userTablePage.currentPage = currentPage
      this.userTablePage.pageSize = pageSize
      this.findUserList()
    },
    tabsChange (key) {
      this.tabKey = key
      if (key === 'baseInfo') {
        this.infoFlag = true
        this.labelFlag = false
        this.userFlag = false
        this.roleFlag = false
      } else if (key === 'labelList') {
        this.infoFlag = false
        this.labelFlag = true
        this.userFlag = false
        this.roleFlag = false
      } else if (key === 'userList') {
        this.infoFlag = false
        this.labelFlag = false
        this.userFlag = true
        this.roleFlag = false
      } else if (key === 'roleList') {
        this.infoFlag = false
        this.labelFlag = false
        this.userFlag = false
        this.roleFlag = true
      }
    },

    saveMenu () {
      // 表单验证
      const menuPage = this.$refs.menuPage
      let infoButtonType = this.infoButtonType
      let menuTreePage = this.$refs.menuTreePage
      if (infoButtonType == '9') {
        infoButtonType = '1'
      }
      if (menuPage.$refs.appMenuform.checkForm()) {
        const menu = menuPage.form
        if (menu.menuId) {
          this.$http.post(editAppMenu, menu).then((res) => {
            let result = res.result
            result.key = result.menuId
            menuTreePage.updateTree(result, infoButtonType)
            menuPage.setData(result)
            this.$notification.success({
              message: '保存提示',
              description: '修改成功'
            })
          }).catch(() => {
          })
        } else {
          this.$http.post(addAppMenu, menu).then((res) => {
            let result = res.result
            result.key = result.menuId
            if (this.menuInfo) {
              result.dragKey = this.menuInfo.menuId
              result.dropKey = result.parentId
            }
            menuTreePage.updateTree(result, infoButtonType)
            menuPage.setData(result)
            this.$notification.success({
              message: '保存提示',
              description: '新增成功'
            })
          }).catch(() => {
          })
        }

      }
    },
    saveLabel () {
      let menuInfo = this.menuInfo;
      if (this.selectedKeys && this.selectedKeys.length > 0) {
        this.$refs.labelPage.$refs.myform.validate(valid => {
          if (valid) {
            const params = {}
            params.labelCodes = this.$refs.menuLabelForm.labelChecked.map(item => item.labelCode)
            params.menuId = menuInfo.menuId
            if (params.menuId) {
              setTimeout(() => {
                this.$http.post(editAppLabel, params).then((res) => {
                  this.$notification.success({
                    message: '保存提示',
                    description: `保存成功`
                  })
                  this.findMenuInfo()
                  this.labelVisible = false
                }).catch(() => {
                })
              }, 200)
            }

          } else {
            return false;
          }
        });
      } else {
        modal.warn({ title: '提示', content: '请先选择需要关联标签的菜单数据' })
      }
    },
    menuAdd () {
      if (this.selectedKeys && this.selectedKeys.length > 0) {
        let menuInfo = null
        if (this.infoButtonType == '3') {
          menuInfo = this.$refs.menuPage.form
          this.menuInfo = Object.assign({}, menuInfo)
        } else {
          menuInfo = this.menuInfo
        }
        this.infoButtonType = '1'
        let params = Object.assign({}, initForm)
        params.parentId = menuInfo.parentId
        params.parentTitle = menuInfo.parentTitle
        params.status = '1'
        params.publicFlag = '1'
        params.nodeType = menuInfo.nodeType
        params.labelFlag = '0'
        params.rate = menuInfo.rate
        params.menuPro = menuInfo.menuPro
        params.menuType = menuInfo.menuType
        params.labelFlag = '0'
        this.$refs.menuPage.setData(params)
      } else {
        modal.warn({ title: '提示', content: '请先选择某一节点' })
      }
    },
    childmenuAdd () {
      if (this.selectedKeys && this.selectedKeys.length > 0) {
        let menuInfo = null
        if (this.infoButtonType == '3') {
          menuInfo = this.$refs.menuPage.form
          this.menuInfo = Object.assign({}, menuInfo)
        } else {
          menuInfo = this.menuInfo
        }
        let nodeType = menuInfo.nodeType
        if (nodeType && nodeType === '1') {
          modal.warn({ title: '提示', content: '节点类型是叶子，不能添加子节点' })
        } else {
          this.infoButtonType = '2'
          let params = Object.assign({}, initForm)
          params.parentId = menuInfo.menuId
          params.parentTitle = menuInfo.title
          params.status = '1'
          params.publicFlag = '0'
          params.nodeType = menuInfo.nodeType
          params.menuPro = menuInfo.menuPro
          params.menuType = menuInfo.menuType
          params.labelFlag = '0'
          let rate = menuInfo.rate
          if (rate) {
            rate = rate + 1
          } else {
            rate = 1
          }
          params.rate = rate
          params.bgColor = menuInfo.bgColor
          params.color = menuInfo.color
          params.icon = menuInfo.icon
          params.labelFlag = menuInfo.labelFlag

          this.$refs.menuPage.setData(params)
        }
      } else {
        modal.warn({ title: '提示', content: '请先选择某一节点' })
      }
    },
    deleteMenu () {
      if (this.selectedKeys && this.selectedKeys.length > 0) {
        let menuInfo = this.$refs.menuPage.form
        let params = {}
        params.menuId = menuInfo.menuId
        setTimeout(() => {
          this.$http.post(deleteAppMenu, params).then(() => {
            modal.info({ title: '成功提示', content: '删除成功' })
            let data = [...this.menuList]
            loop(data, this.menuInfo.funcId, (item, index, arr) => {
              arr.splice(index, 1)
            })
            this.infoButtonType = '9'
            this.$refs.menuPage.setData()

          }).catch(() => {
          })
        }, 100)
      } else {
        modal.warn({ title: '提示', content: '请先选择需要删除的数据' })
      }
    },
    onDrop (info) {
      this.$refs.menuPage.setData(info)
    },
    openAddLabel () {
      let menuInfo = Object.assign({}, this.$refs.menuPage.form);
      if (menuInfo) {
        const nodeType = menuInfo.nodeType
        if (nodeType === '0') {
          modal.warn({ title: '提示', content: '不能选择节点操作' })
          return
        }
        this.menuInfo = menuInfo;
        this.labelVisible = true
      } else {
        modal.warn({ title: '提示', content: '请先选择需要操作的菜单' })
      }
    },
    openRoleModel () {
      let menuInfo = Object.assign({}, this.$refs.menuPage.form);
      if (menuInfo) {
        const nodeType = menuInfo.nodeType
        if (nodeType === '0') {
          modal.warn({ title: '提示', content: '不能选择节点操作' })
          return
        }
        this.menuInfo = menuInfo;
        this.roleVisible = true
      } else {
        modal.warn({ title: '提示', content: '请先选择需要操作的菜单' })
      }
    },
    saveRole () {
      const roles = this.$refs.LabelRolePage.roleChecked
      const menuId = this.menuInfo.menuId
      if (roles) {
        if (roles.length <= 0) {
          modal.warn({ title: '提示', content: '请先勾选需要授权的角色' })
          return false
        }
      } else {
        modal.warn({ title: '提示', content: '请先勾选需要授权的角色' })
        return false
      }
      const roleIds = []
      roles.forEach((item) => {
        roleIds.push(item.roleId)
      })
      const params = {}
      params.menuId = menuId
      params.roleIds = roleIds
      setTimeout(() => {
        this.$http.post(saveMenuRole, params).then(() => {
          modal.info({ title: '成功提示', content: '授权成功' })
          this.roleVisible = false
          this.findRoleList()
        }).catch(() => {
        })
      }, 10)
    },
    deleteRole () {
      this.menuInfo = Object.assign({}, this.$refs.menuPage.form);
      if (this.menuInfo) {
        const nodeType = this.menuInfo.nodeType
        if (nodeType === '0') {
          modal.warn({ title: '提示', content: '不能选择节点操作' })
          return
        }
        const roleIds = []
        const checkedRole = this.$refs.roleListTable.getCheckboxRecords()
        const selectReserveRecords = this.$refs.roleListTable.getCheckboxReserveRecords()
        if (checkedRole && checkedRole.length > 0) {
          checkedRole.forEach((item) => {
            roleIds.push(item.roleId)
          })
        }
        if (selectReserveRecords && selectReserveRecords.length > 0) {
          selectReserveRecords.forEach((item) => {
            roleIds.push(item.roleId)
          })
        }
        if (roleIds.length > 0) {
          const params = {}
          params.roleIds = roleIds
          params.menuId = this.menuInfo.menuId
          setTimeout(() => {
            this.$http.post(deleteMenuRole, params).then(() => {
              modal.info({ title: '成功提示', content: '删除成功' })
              this.findRoleList()
            }).catch(() => {
            })
          }, 10)
        } else {
          modal.warn({ title: '提示', content: '请先勾选需要删除的角色' })
        }
      } else {
        modal.warn({ title: '提示', content: '请先选择需要操作的菜单' })
      }
    },
    openRouetUserModel () {
      // 打开添加用户页面
      this.menuInfo = Object.assign({}, this.$refs.menuPage.form);
      if (this.menuInfo) {
        const nodeType = this.menuInfo.nodeType
        if (nodeType === '0') {
          modal.warn({ title: '提示', content: '不能选择节点操作' })
          return
        }
        this.MenuUservisible = true
      } else {
        modal.warn({ title: '提示', content: '请先选择需要操作的菜单' })
      }
    },
    saveUser () {
      this.menuInfo = Object.assign({}, this.$refs.menuPage.form);
      const users = this.$refs.menuUserPage.userChecked
      const menuId = this.menuInfo.menuId
      if (users) {
        if (users.length <= 0) {
          modal.warn({ title: '提示', content: '请先勾选需要授权的用户' })
          return false
        }
      } else {
        modal.warn({ title: '提示', content: '请先勾选需要授权的用户' })
        return false
      }
      const userIds = []
      users.forEach((item) => {
        userIds.push(item.userId)
      })
      const params = {}
      params.menuId = menuId
      params.userIds = userIds
      setTimeout(() => {
        this.$http.post(saveMenurUser, params).then(() => {
          modal.info({ title: '成功提示', content: '授权成功' })
          this.MenuUservisible = false
          this.findUserList()
        }).catch(() => {
        })
      }, 10)
    },
    deleteUser () {
      this.menuInfo = Object.assign({}, this.$refs.menuPage.form);
      if (this.menuInfo) {
        const nodeType = this.menuInfo.nodeType
        if (nodeType === '0') {
          modal.warn({ title: '提示', content: '不能选择节点操作' })
          return
        }
        const checkedUser = this.$refs.userListTable.getCheckboxRecords()
        const selectReserveRecords = this.$refs.userListTable.getCheckboxReserveRecords()
        const userIds = []
        if (checkedUser && checkedUser.length > 0) {
          checkedUser.forEach((item) => {
            userIds.push(item.userId)
          })
        }
        if (selectReserveRecords && selectReserveRecords.length > 0) {
          selectReserveRecords.forEach((item) => {
            userIds.push(item.userId)
          })
        }
        if (userIds.length > 0) {
          const params = {}
          params.menuId = this.menuInfo.menuId
          params.userIds = userIds
          setTimeout(() => {
            this.$http.post(deleteMenuUser, params).then(() => {
              modal.info({ title: '成功提示', content: '删除成功' })
              this.findUserList()
            }).catch(() => {
            })
          }, 10)
        } else {
          modal.warn({ title: '提示', content: '请先勾选需要删除的用户' })
        }
      } else {
        modal.warn({ title: '提示', content: '请先选择需要操作的菜单' })
      }
    },
  }
}
</script>
<style lang="less" scoped>
@import '~ant-design-vue/lib/style/themes/default.less';
.search-tree-color {
  color: @primary-color;
}
</style>
